<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <h1 class="title">{{ title }}学科数据列表</h1>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        bordered>
        <div slot="state" slot-scope="text, record" class="record">
          <span>{{ state[record.state] }}</span>
        </div>
        <div slot="action" slot-scope="text, record, index" class="action">
          <a-button type="primary" size="small" @click="handleReturn(record.id, index)">退回</a-button>
          <a-button size="small" @click="handleCheck(record.id)">查看</a-button>
        </div>
      </a-table>
      <a-modal v-model="returnVisible" title="数据退回" @ok="handleReturnOk" cancelText="取消" okText="确定">
        <a-icon type="file-exclamation" />
        <span>退回原因</span>
        <a-textarea placeholder="请输入退回原因" :rows="4" class="reason" v-model="returnData.reason" />
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getSubjectTable, viewTable, kkView, returnTable } from '@/api/table'
export default {
  name: 'BaseForm',
  components: {
    STable
  },
  data () {
    return {
      loading: true,
      returnVisible: false,
      returnData: {
        index: 0,
        id: '',
        reason: '',
        type: 'university'
      },
      state: ['未上传', '已上传', '已退回'],
      columns: [{
        title: '检测项目',
        key: 'project',
        width: '100px',
        dataIndex: 'project'
      },
      {
        title: '检测要素',
        key: 'factor',
        width: '100px',
        dataIndex: 'factor'
      },
      {
        title: '核心监测点',
        key: 'point',
        dataIndex: 'point'
      },
      {
        title: '监测点说明',
        key: 'content',
        dataIndex: 'content'
      },
      {
        title: '说明',
        key: 'explain',
        dataIndex: 'explain',
        width: '120px'
      },
      {
        title: '填报内容',
        key: 'action',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        width: '180px'
      }],
      tableData: []
    }
  },
  mounted () {
    this.getData()
  },
  computed: {
    title () {
      return this.$route.query.title || ''
    }
  },
  methods: {
    getData () {
      return new Promise((resolve, reject) => {
        getSubjectTable({
          code: this.$route.query.id
        }).then(response => {
          this.tableData = response.data
          this.loading = false
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    handleReturn (id, index) {
      this.returnData.id = id
      this.returnData.type = this.title
      this.returnData.index = index
      this.returnVisible = true
    },
    handleReturnOk () {
      if (!this.returnData.reason) {
        this.$message.warning('必须填写退回原因')
        return
      }
      this.handleReturnTable()
    },
    handleReturnTable () {
      return new Promise((resolve, reject) => {
        returnTable(this.returnData.id, this.returnData).then(response => {
          this.tableData[this.returnData.index].state = 2
          this.returnData.reason = ''
          this.returnVisible = false
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    handleCheck (id) {
      return new Promise((resolve, reject) => {
        viewTable(id, { subject: this.title }).then(response => {
          window.open(kkView + encodeURIComponent(response.url))
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .action button {
    margin: 4px 6px 0 0;
  }
  .record {
    text-align: center;
  }
  .record span {
    display: block;
  }
  .reason {
    margin-top: 10px;
  }
</style>
